
<style>
    @charset "utf-8";
    /* --------reset-------- */
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, u, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
    }

    ol, ul {
        list-style: none;
    }

    a {
        color: #333;
        text-decoration: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    a img {
        border: none;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    input, textarea, button {
        font: inherit;
        color: inherit;
    }

    fieldset, img, abbr, acronym {
        border: 0;
    }

    address, caption, cite, code, dfn, strong, th, var {
        font-style: normal;
        vertical-align: middle;
    }

    em, i {
        font-style: normal;
    }

    blockquote, q {
        quotes: none;
    }

    blockquote:before, blockquote:after, q:before, q:after {
        content: '';
        content: none;
    }

    ins {
        text-decoration: none;
    }

    del {
        text-decoration: line-through;
    }

    header, footer, article, section, menu, nav, aside, dialog, figure, figcaption, hgroup, details, summary {
        display: block;
    }

    button, textarea, input:not([type="radio"]):not([type="checkbox"]) {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    :focus {
        outline: 0;
    }

    /* Form selected style modification */

    /* --------global-------- */
    *, *:before, *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Pingfang SC, Microsoft Yahei, WenQuanYi Micro Hei, sans-serif;
        font-size: 14px;
        line-height: 1.5;
        overflow-x: hidden;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: inherit;
        font-weight: 500;
        color: inherit;
    }

    .fs24 {
        font-size: 12px
    }


    .message {
        width: 100%;
        height: auto;
        padding: 0 15px;
        position: relative;

    }

    .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin: 0 15px 0 0;
        float: left;
    }

    .msg {
        display: inline-block;
        padding: 10px;
        max-width: calc(85% - 80px);
        min-height: 20px;
        font-size: 12px;
        /*overflow: hidden;*/
        text-align: left;
        word-break: break-all;
        background-color: #fff;
        border-radius: 7.5px;
        position: relative;
        color: #000;
    }

    .msg .msg_poprightarrow {
        position: absolute;
        right: -5px;
        height: 9px;
        width: 9px;
        margin-top: -5px;
    }

    .msg .msg_popleftarrow {
        position: absolute;
        left: -7px;
        height: 9px;
        width: 9px;
        margin-top: -5px;
    }

    .msg .msg-text {
        line-height: 20px;
        font-size: 16px;
        margin: 0;
    }

    .self {
        text-align: right;
    }

    .self .avatar {
        float: right;
        margin: 0 0 0 15px;
    }

    .user {
        position: relative;
        bottom: -15px;
    }

    .self .msg {
        background: #FFFFFF;
        color: #000;
    }

    .self .msg:before {
        right: inherit;
        left: 100%;
        border-right-color: transparent;
        border-left-color: #b2e281;
    }

    .self .msg1:before {
        right: inherit;
        left: 100%;
        border-right-color: transparent;
        border-left-color: #b2e281;
    }

    .template {
        display: inline;
    }

    .box {
        width: 345px;
        padding: 12.5px 12.5px 15px;
        background: #FFFFFF;
        box-shadow: 0px 2px 10px 2.5px rgba(183, 189, 202, 0.05);
        border-radius: 7.5px;
        margin-top: 15px;
        margin-left: auto;
        margin-right: auto;
    }
    .box.edit{
        width: 100%;
        border-top: none;
    }

    .box .cost {
        font-size: 17px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: bold;
        color: #FE3747;
        line-height: 17px;
    }

    .box .label {
        display: inline-block;
        height: 15px;
        line-height: 15px;
        background: rgb(229, 249, 241);
        border-radius: 3px;
        font-size: 10px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #00A77D;
        padding: 0 3px;
        margin-right: 10px;
        margin-top: 12.5px;
    }

    .box .anli {
        padding: 0 3px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        font-size: 10px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        background: linear-gradient(133deg, #00CA67 0%, #009F81 100%);
        border-radius: 3px;
        vertical-align: middle;
    }

    .box .head_nav_mini {
        width: 17.5px;
        height: 17.5px;
    }

    .box .head_nav_mini .head {
        width: 17.5px;
        height: 17.5px;
        border-radius: 50%;
    }

    .box .head_nav_mini .ico_sex {
        width: 8px;
        height: 8px;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 3;
        border-radius: 50%;
    }

    .head_chat .imgm {
        width: 100%;
        height: 100%;
        display: block;
        border-radius: 50%;
    }

    .bg-ghostWhite {
        background-color: #f7f7f7;
    }
    .container{
        min-height: 100vh;
        padding-bottom: 15px;
        padding-top: 10px;
        border-radius: 15px;
    }
    .tc{text-align: center;}
    .pt20{padding-top: 20px;}
    .mt40{margin-top: 40px;}
</style>
<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-horizontal">
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">申请人:</label>
            <div class="col-xs-12 col-sm-8">
                <p class="form-control-static">{$row.user.nickname}</p>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">订单号:</label>
            <div class="col-xs-12 col-sm-8">
                <p class="form-control-static">{$row.orders.order_no}</p>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">申诉金额:</label>
            <div class="col-xs-12 col-sm-8">
                <p class="form-control-static">{$row.price}</p>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">申诉理由:</label>
            <div class="col-xs-12 col-sm-8">
                <p class="form-control-static">{$row.reason}</p>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">申诉说明:</label>
            <div class="col-xs-12 col-sm-8">
                <p class="form-control-static">{$row.appeal_content}</p>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">申诉图片:</label>
            <div class="col-xs-12 col-sm-8">
                <p class="form-control-static">
                    {foreach $row.images_text as $img}
                    <a href="{$img}" target="_blank"><img style="width:100px;" src="{$img}" /></a>
                    {/foreach}
                </p>
            </div>
        </div>

    </div>

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('State')}:</label>
        <div class="col-xs-12 col-sm-8">

            <div class="radio">
                {foreach name="stateList" item="vo"}
                <label for="row[state]-{$key}"><input id="row[state]-{$key}" name="row[state]" type="radio" value="{$key}" {in name="key" value="$row.state"}checked{/in} /> {$vo}</label>
                {/foreach}
            </div>

        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Refuse_content')}:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea id="c-refuse_content" class="form-control" rows="5" name="row[refuse_content]">{$row.refuse_content|htmlentities}</textarea>
        </div>
    </div>

    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#history">售后记录</a></li>
        <li><a data-toggle="tab" href="#chat">聊天详情</a></li>
    </ul>
    <div class="tab-content" style="padding-top: 10px;">
        <div id="history" class="tab-pane fade in active">
            <div class="box edit">
                <table class="table">
                    <thead>
                    <tr>
                        <th style="text-align: left;width:20%">标题</th>
                        <th style="text-align: left;width:20%">时间</th>
                        <th style="text-align: left;width:60%">描述</th>
                    </tr>
                    </thead>
                    <tbody>
                    {foreach $row.aftersalelog as $log}
                    <tr>
                        <td>{$log.title}</td>
                        <td>{$log.createtime?datetime($log.createtime) :''}</td>
                        <td>{$log.description}</td>
                    </tr>
                    {/foreach}
                    </tbody>
                </table>

            </div>
        </div>

        <div id="chat" class="tab-pane fade in">
            <section class="container bg-ghostWhite">
                <div>
                    {foreach name="chat_lists" item="vo"}
                    <div class="message">
                        {if $vo.chat_type == 1 }
                        <div class="pt20 tc fs24 cola lh24">{:datetime($vo.createtime)}</div>
                        <!--以下是文本消息 -->
                        <div class="main mt40 {$myuserinfo.id==$vo.send_user_id?'self':''}">
                            <img src="{$myuserinfo.id==$vo.send_user_id?$myuserinfo.avatar:$touserinfo.avatar}"
                                 class="avatar"/>
<!--                            <div class="avatar">{$myuserinfo.id == $row.user_id?'买家':'卖家'}</div>-->
                            <div class="msg">
                                <!--  v-else-if="item.msg.type == 'txt' || item.msg.type == 'emoji'" -->
                                <div>
                                    <div class="template">
                                        <text class="msg-text" style="float:left;">{$vo.content}</text>

                                        <!--                            <image class="avatar" src="/static/icon/ico53.png" style="width:25px; height:25px; margin:0 0 2px 0; float:left;" />-->
                                    </div>
                                </div>

                            </div>
                        </div>
                        {/if}
                        {if $vo.chat_type == 2 }
                        <div class="pt20 tc fs24 cola lh24">{:datetime($vo.createtime)}</div>
                        <!--以下是文本消息 -->
                        <div class="main mt40 {$myuserinfo.id==$vo.send_user_id?'self':''}">
                            <img src="{$myuserinfo.id==$vo.send_user_id?$myuserinfo.avatar:$touserinfo.avatar}"
                                 class="avatar"/>
                            <div class="msg">
                                <div>
                                    <div class="template">
                                        <img class="avatar" src="{$vo.content}" style="width:25px; height:25px; margin:0 0 2px 0; float:left;" />
                                    </div>
                                </div>

                            </div>
                        </div>
                        {/if}

                    </div>

                    {/foreach}
                </div>

            </section>
        </div>
    </div>

    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>
